require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("./mine_modify.less");
// 引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

// 1.点击返回上一页
dom.get("#personData span").addEventListener("click", function () {
	history.back();
});
document.addEventListener("DOMContentLoaded", function () {
	// 2.性别单选框
	dom.get("#gender").addEventListener("click", function () {
		weui.picker(
			[
				{ label: "男", value: 0 },
				{ label: "女", value: 1 },
				{ label: "保密", value: 2 },
			],
			{
				onConfirm: function (result) {
					dom.get("#gender").textContent = result[0].label;
					dom.get("#gender").dataset.value = result[0].value;
				},
				title: "请选择性别",
			}
		);
	});
	// 3.生日日期选择框
	dom.get("#birthday").addEventListener("click", function () {
		weui.datePicker({
			start: 1900,
			end: new Date().getFullYear(),
			onConfirm: function (result) {
				let date = result.map(v => v.value).join("-");
				dom.get("#birthday").textContent = date;
			},
			title: "请选择出生日期",
		});
	});
	// 4.所在省份单选框
	let provinceId = 0;
	dom.get("#province").addEventListener("click", function () {
		// 发送get请求获取省份数据
		axios.get("api/shared/province").then(res => {
			// console.log(res);
			let provinceArr = res.data.data.map(function (v) {
				return { label: v.name, value: v.id };
			});
			weui.picker(provinceArr, {
				onConfirm: function (result) {
					dom.get("#province").textContent = result[0].label;
					// dataset获取自定义属性
					dom.get("#province").dataset.value = result[0].value;
					provinceId = result[0].value;
				},
				title: "请选择省份",
			});
		});
	});
	// 5.城市选择框

	dom.get("#city").addEventListener("click", function () {
		// 先判断是否有选择省份
		if (provinceId === 0) {
			alert("请先选择省份");
			return;
		}
		// 发送get请求获取城市数据,和获取省份数据一样
		axios.get("/api/shared/city?provinceId=" + provinceId).then(res => {
			let cityArr = res.data.data.map(v => {
				return { label: v.name, value: v.id };
			});
			weui.picker(cityArr, {
				onConfirm: function (result) {
					dom.get("#city").textContent = result[0].label;
					dom.get("#city").dataset.value = result[0].value;
					provinceId = result[0].value;
				},
				title: "请选择城市",
			});
		});
	});
	// 6.头像上传

	dom.get("#avatorOption").addEventListener("change", function () {
		// 通过FormData构造上传文件数据
		let fd = new FormData();
		console.log(fd, this.files[0]);
		fd.append("file", this.files[0]);
		// 将构造好的文件，通过接口发送到服务器
		axios.post("/api/shared/uploadPortrait", fd).then(res => {
			console.log(res);
			if (res.data.errno === 0) {
				// 表示头像上传成功
				dom.get("#avator").src = axios.defaults.baseURL + res.data.data.url; //拼接的头像地址
				dom.get("#avator").dataset.value = res.data.data.url; //这个是用于提交的地址
			} else {
				alert("上传头像失败!");
			}
		});
	});
	//7.个性签名字数统计
	dom.get("#sign").addEventListener("input", function () {
		dom.get("#textNum").textContent = this.value.length;
	});
	// 8.上传个人资料数据
	dom.get("#saveBtn").addEventListener("click", function () {
		// 获取参数
		let nickName = dom.get("#nickname").value;
		let gender = Number(dom.get("#gender").dataset.value);
		let provinceId = Number(dom.get("#province").dataset.value);
		let cityId = Number(dom.get("#city").dataset.value);
		let birthday = dom.get("#birthday").textContent;
		let imgUrl = dom.get("#avator").dataset.value;
		let sign = dom.get("#sign").value;
		// 发送请求,传数据
		axios
			.post("/api/user/changeInfo", {
				nickName,
				gender,
				provinceId,
				cityId,
				birthday,
				imgUrl,
				sign,
			})
			.then(res => {
				// console.log(res);
				if (res.data.errno === 0) {
					// 存储token
					localStorage.setItem("token", res.data.data.token);
					// 提交完返回到上一页
					history.back();
				}
			});
	});
	// 9.回填个人数据
	// 发送请求获取修改数据
	axios.get("/api/user/info").then(async res => {
		console.log(res);
		let data = res.data.data;
		// 获取到的所有用户修改数据
		// console.log(data);
		// 回填头像
		dom.get("#avator").src = axios.defaults.baseURL + data.imgUrl;
		dom.get("#avator").dataset.value = data.imgUrl;
		// 回填昵称
		dom.get("#nickname").value = data.nickName;
		// 回填性别
		let genderArr = ["男", "女", "保密"];
		dom.get("#gender").dataset.value = data.gender || 0;
		dom.get("#gender").textContent = genderArr[data.gender];
		// 回填生日
		dom.get("#birthday").textContent = data.birthday;
		// 回填省份
		// 发送请求获取省份数据
		let pro = await axios.get("api/shared/province");

		// 遍历省份数组
		let [province] = pro.data.data.filter(v => v.id === data.provinceId);
		// console.log(province);
		dom.get("#province").dataset.value = data.provinceId;
		dom.get("#province").textContent = province.name;
		// 回填城市
		let city = await axios.get(
			"/api/shared/city?provinceId=" + data.provinceId
		);
		// console.log(city);
		let [cityList] = city.data.data.filter(v => v.id === data.cityId);
		// console.log(cityList);
		dom.get("#city").dataset.value = data.cityId;
		dom.get("#city").textContent = cityList.name;
		// 回填个性签名
		dom.get("#sign").value = data.sign;
		dom.get("#textNum").textContent = data.sign.length;
	});
});
